<template>
  <div class="fluid field myfield">
      <field_title :title_show="!field.hideTitle&&!field.no_title" :field="field" ></field_title>
    <!-- <p class='ui text' v-if='$store.state.isDetail'>{{val}}</p> -->
    <div class="ui ignored info attached message" v-if='$store.state.isDetail'>
      <p>{{dateAll.startTime.time}}~{{dateAll.endTime.time}}</p>
    </div>
    <div v-else >
      <datepicker v-if="dateAll" :_dateAll="dateAll" @setDate="setDate"></datepicker>

    </div>
  </div>
</template>

<script>
  import tool from 'src/util/tool';
  import datepicker from 'components/common/datepicker'
  import util from '_util/index';
  import field_title from 'components/field/com/field_title';

  export default {
    data() {
      return {
        val: '',
        dateAll: null
      }
    },
    components: {
      datepicker,
        field_title
    },
    methods: {
      setDate(val) {
        this.val = val
      },
      upVal({startTime,endTime}){
        this.dateAll=null;
        util.mydelay(() => {
          this.dateAll = {
            startTime: {
              time: startTime
            },
            endTime: {
              time: endTime
            }
          }
        });
      },
      setVal(){
        this.val  = this.field.fval || {}
        this.dateAll = {
          startTime: {
            time: this.val.startTime
          },
          endTime: {
            time: this.val.endTime
          }
        }
      },
        init_dateAll(){
            let info = this.$store.state.list.filterData[this.ctl]||{};
        this.dateAll = {
          startTime: {
            time: info.startTime||undefined
          },
          endTime: {
            time: info.endTime||undefined
          }
        }
      }
    },
    watch: {
      val: function (val, old) {
        if (val != old) {
          this.$emit('setVo', this.field.name, val)
        }
      }
    },
    computed: {
        ctl() {
            return this.$route.query.ctl;
        }
    },
    props: ['field','param','not_setVal'],
    created() {
      if(!this.not_setVal)
        this.setVal();
      else
          this.init_dateAll();
    },
    mounted() {

    }
  };
</script>

<style rel="stylesheet/less" lang="less" scoped>
  .fluid.field {
    .datepickbox {
      input {
        display: inline-block;
        vertical-align: top;
        padding: 1px 8px;
        line-height: 19px;
        font-size: 13px;
        border: 2px solid rgba(0, 0, 0, 0.2);
        /*box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2);*/
        border-radius: 3px;
        color: #5F5F5F;
        cursor: pointer;
      }
    }
    .datepicker-overlay {
      .cov-date-body {
        .cov-date-caption {
        }
      }
    }
  }
</style>
